<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>蓝快商贸</title>
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/Hone_top.css">
    <link rel="stylesheet" href="css/chushihua.css">
    <link rel="stylesheet" href="css/gonggongyangshi.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/swiper.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.0/lib/index.css">
    <script src="js/jquery-3.3.2.min.js"></script>
    <script src="js/swiper.js"></script>
    <script src="js/index.js"></script>
</head>

<body>
    <!-- 头部 -->
    <div class="top w-100">
        <div class="top_shang">
            <div class="container flex">
                <span>亲，欢迎进入蓝快商贸</span>
                <span><a href="">首页</a></span>
                <span><a href="">登录</a></span>
                <span><a href="">免费注册</a></span>
                <!-- <span><a href=""></a></span> -->
            </div>
        </div>
        <div class="top_xia">
            <div class="container flex">
                <div class="logo">
                    <p>中国蓝快商贸</p>
                    <div>China Blue Express Trade</div>
                </div>
                <div>蓝快商贸在线查询工具</div>
                <div>
                    <img src="img/search.png" alt="">
                    <input type="text" placeholder="请输入关键词">
                    <button>下拉框选词</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 导航 -->
    <div class="nav w-100">
        <div class="container flex">
            <p>蓝快商贸·功能导航
                <img src="img/jiantou_xia.png" alt="">
            </p>
            <a href="#">首页</a>
            <a href="#">导航1</a>
            <a href="#">导航2</a>
            <a href="#">导航3
                <img src="img/hot.gif" alt="">
            </a>
            <a href="#">导航4
                <img src="img/hot.gif" alt="">
            </a>
            <a href="#">导航5
                <img src="img/hot.gif" alt="">
            </a>
            <a href="#">导航6
                <img src="img/hot.gif" alt="">
            </a>
            <a href="#">导航7
                <img src="img/hot.gif" alt="">
            </a>
            <a href="#">导航8</a>
        </div>
    </div>
    <!-- 功能-轮播a-登录_公告 -->
    <div class="w-100">
        <div class="container flex space-between">
            <div class="gongneng">
                <div>
                    <p>蓝快商贸工具</p>
                    <div class="flex">
                        <a href="">工具工具工具</a><a href="">工具工具工具</a>
                    </div>
                    <div class="flex">
                        <a href="">工具工具工具</a><a href="">工具工具工具</a>
                    </div>
                </div>
                <div>
                    <p>蓝快商贸工具</p>
                    <div class="flex">
                        <a href="">工具工具工具</a><a href="">工具工具工具</a>
                    </div>
                    <div class="flex">
                        <a href="">工具工具工具</a><a href="">工具工具工具</a>
                    </div>
                </div>
                <div>
                    <p>蓝快商贸工具</p>
                    <div class="flex">
                        <a href="">工具工具工具</a><a href="">工具工具工具</a>
                    </div>
                    <div class="flex">
                        <a href="">工具工具工具</a><a href="">工具工具工具</a>
                    </div>
                </div>
                <div>
                    <p>蓝快商贸工具</p>
                    <div class="flex">
                        <a href="">工具工具工具</a><a href="">工具工具工具</a>
                    </div>
                    <div class="flex">
                        <a href="">工具工具工具</a><a href="">工具工具工具</a>
                    </div>
                </div>
            </div>
            <div class="lunboa">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="img/tupian.png" alt=""></div>
                        <div class="swiper-slide"><img src="img/tupian.png" alt=""></div>
                        <div class="swiper-slide"><img src="img/tupian.png" alt=""></div>
                        <div class="swiper-slide"><img src="img/tupian.png" alt=""></div>
                        <div class="swiper-slide"><img src="img/tupian.png" alt=""></div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>
                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
            </div>
            <div class="denglu_gonggao">
                <div class="denglu">
                    <img src="img/login_hearder.jpg" alt="">
                    <p>HI, 你还没有登录哦?</p>
                    <p><a href="#">没有账号？免费注册</a></p>
                    <div class="flex space-center">
                        <a href="">免费注册</a><a href="">会员登录</a>
                    </div>
                </div>
                <div class="gonggao">
                    <div class="flex space-between">
                        <span>最新公共</span>
                        <a href="">更多>></a>
                    </div>
                    <ul>
                        <li>
                            <a href=""> 关于功能查询进度条的说明</a>
                        </li>
                        <li>
                            <a href=""> 蓝快商贸新版本上线，新功能说明</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 轮播b -->
    <div class="lunbob w-100">
        <div class="container">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="img/tupian.png" alt=""></div>
                    <div class="swiper-slide"><img src="img/tupian.png" alt=""></div>
                    <div class="swiper-slide"><img src="img/tupian.png" alt=""></div>
                    <div class="swiper-slide"><img src="img/tupian.png" alt=""></div>
                    <div class="swiper-slide"><img src="img/tupian.png" alt=""></div>
                </div>
                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
        </div>
    </div>
    <div class="app" id="app">

        <div class="zgongneng">
            <div class="zxiaokuai animated rotateInUpLeft " v-for="(item,index) in bat" :key="index">
                <img src="http://images-1257652487.file.myqcloud.com/images/index3_10.png" alt="">
                <h2 class="zguanjian">关键词展现查询</h2>
                <a class="zzbutton">点击使用</a>
            </div>
        </div>
        <!-- 这是功能模块 -->
        <div class="zheng animated fadeInLeft"><span>数据化运营</span></div>

        <!-- 小分割 -->
        <div class="zzycontainer">
            <div class="zzynav">
                <div><span><img src="img/zylogo.png" alt="资源"><span>最新上传资源</span></span>
                </div>
                <div><span><a href="#">更多>></a></span></div>
            </div>
            <div class="zziyuan animated fadeInRight">
                <div class="zzyx" v-for="(item,index) in ziyuan" :key="index">
                    <!-- <span class="zword">WORD</span> -->
                    <div class="zzypric">
                        <div class="pricediv">
                            <img src="img/guarant_01.png" alt="这是一张图片" class="imgo">
                            <img src="img/guarant_01_.png" alt="这是一张图片" class="imgt">
                            <span class="pricedivspan">安全真实买号</span>
                        </div>
                    </div>
                    <div class="zzybuttom">
                        <div>全国各地的100%真实买手，绑定的买号都经过人工审核，包括注册时间，买号级别，是否实名认证等等，以保证安全性！</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 这是产品模块 -->
        <div class="zhzcontainer animated rollIn">
            <div class="zhztop">查运营战略合作品牌</div>
            <div class="zhzlogo">
                <p v-for="(item,index) in hezuo" :key="index" class="zhzlogos">
                    <img :src=item alt="logo" width="75%">
                </p>
            </div>
        </div>
        <div class="zbeian">
            <span>Copyright 2018-2019 郑州蓝快商务有限公司 蓝快查 www.lankuai.com 豫ICP备18047066号 </span><a href="#">关于我们 联系我们</a>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.0/lib/vant.min.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                bat: [1, 2, 3, 4, 5, 6, 7, 8],
                ziyuan: [1, 2, 3, 4],
                hezuo: [
                    "http://images-1257652487.file.myqcloud.com/images/index6_1.png",
                    "http://images-1257652487.file.myqcloud.com/images/index6_2.png",
                    "http://images-1257652487.file.myqcloud.com/images/index6_3.png",
                    "http://images-1257652487.file.myqcloud.com/images/index6_4.png",
                    "http://images-1257652487.file.myqcloud.com/images/index6_5.png",
                    "http://images-1257652487.file.myqcloud.com/images/index6_6.png",
                    "http://images-1257652487.file.myqcloud.com/images/index6_7.png",
                    "http://images-1257652487.file.myqcloud.com/images/index6_8.png",
                    "http://images-1257652487.file.myqcloud.com/images/index6_9.png",
                    "http://images-1257652487.file.myqcloud.com/images/index6_10.png",
                    "http://images-1257652487.file.myqcloud.com/images/index6_11.png",
                    "http://images-1257652487.file.myqcloud.com/images/index6_12.png",
                    "http://images-1257652487.file.myqcloud.com/images/index6_13.png",
                    "http://images-1257652487.file.myqcloud.com/images/index6_14.png"
                ]
            }
        })
    </script>
</body>

</html>